<template>
  <div class="frame" :style="{paddingLeft}">
    <!-- 左侧菜单栏 -->
    <MenuLeft ref="MenuLeft" :menuOpen="menuOpen"></MenuLeft>

    <!-- 顶栏菜单 -->
    <TopBar :menuOpen="menuOpen" @click="visibleMenu" @personalityShow="personalityShow">
      <!-- 顶栏标签路由 -->
      <WorkTab/>
    </TopBar>
    
    <!-- 主体区域 -->
    <div class="container">
      <transition name="slide-fade">
        <router-view></router-view>
      </transition>
    </div>

    <!-- 个性化设置 -->
    <Personality @click="personalityShow" :show="showpersonality" @closePersonality="closePersonality"></Personality>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      // 菜单栏是否展开
      menuOpen: true,
      // 个性化设置抽屉可见性
      showpersonality: false
    }
  },
  computed: {
    ...mapState({
      usersetting: state => state.usersetting.setting,
      Worktab: state => state.worktab
    }),
    paddingLeft() {
      return this.menuOpen ? '250px' : '70px'
    }
  },
  created() {
    this.initsetting()
    this.openedrouter()
  },
  methods: {
    // 初始化用户的个性设置 这个如果有后端接口之后得改
    initsetting() {
      // 这里是判断localstorage中是否有usersetting
      if(window.localStorage.getItem('usersetting')) {
        // 存在得话将localstorage中得值取下来赋值给vuex中的usersetting
        let that = JSON.parse(localStorage.getItem('usersetting'))
        this.$store.dispatch('setUpTheme',that.theme)
        this.$store.dispatch('setLeftMenuUniqueOpened',{
          show: that.uniqueOpened
        })
        this.$store.dispatch('setLeftMenuButton',{
          show: that.menuButton
        })
        this.$store.dispatch('setLeftMenuCrumbs',{
          show: that.showCrumbs
        })
        this.$store.dispatch('setThemeModel',that.themeModel)
        this.$store.dispatch('setshowAvatar',{
          show: that.showAvatar
        })
      }else{
        // 这是用户localstorage中没有usersetting才会被调用
        window.localStorage.setItem('usersetting',JSON.stringify(this.usersetting))
      }
    },
    // 用户已打开路由保存在sessionstorage，防止刷新丢失
    openedrouter() {
      if(window.sessionStorage.getItem('worktab')) {
        this.$store.dispatch('worktabinitState',JSON.parse(sessionStorage.getItem('worktab')))
      }
    },
    // 菜单栏展开收缩
    visibleMenu() {
      this.menuOpen = !this.menuOpen
      this.$refs.MenuLeft.visibleMenu();
    },
    // 展开个性化设置抽屉
    personalityShow() {
      this.showpersonality = !this.showpersonality
    },
    // 关闭个性化抽屉
    closePersonality() {
      this.showpersonality = false
    }
  }
}
</script>

<style lang="scss" scoped>
 .frame {
    $default-background: #F6F7F9;
    width: 100%;
    padding: 115px 0 15px 0;
    box-sizing: border-box;
    transition: padding .3s ease-in-out;
    min-height: 100vh;
    overflow: hidden;
    background: $default-background;

    .container {
      width: calc(100% - 30px);
      min-height: 100%;
      margin: auto;
      box-sizing: border-box;

      // 子页面默认style
      >>> .page-content {
        min-height: calc(100vh - 120px);
        background: #fff;
        padding: 16px;
        position: relative;
        box-sizing: border-box;
        border-radius: 3px;

        >>> .open-head-btn {
          width: 100%;
          height: 15px;
          cursor: pointer;
          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 999;
          text-align: center;
          font-size: 12px;
          color: #eee;
        }
      }
    }
  }
// 路由过渡动画
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  height: 150%;
  opacity: 0;
}
::-webkit-scrollbar {
  display: none;
}

</style>